<template>
	<view class="briefIntroduction">
		<uni-nav-bar left-icon="back" @clickLeft="clickBack" title="编辑简介" fixed="true" style="margin-top: 20px;">
			<view class="complete" :style="changeComplete == 1 ? 'color:#FE6440':''" @click="clickBriefIntroduction">完成</view>
		</uni-nav-bar>
		<view style="height: 15px;"></view>
		<view class="textarea">
			<textarea v-model="briefIntroduction" maxlength="50" auto-height="true" show-confirm-bar="true" />
		</view>
	</view>
</template>

<script>
import utils from '../../../../utils/util.js'
export default{
	name: 'BriefIntroduction',
	data() {
		return{
			changeComplete: 0,
			briefIntroduction: '',
			oldBriefIntroduction: ''
		}
	},
	watch: {
		'briefIntroduction': {
			handler(newName,oldName) {
				if(newName !== this.oldBriefIntroduction)
				{
					this.changeComplete = 1;
				}else{
					this.changeComplete = 0;
				}
			},
			deep: true
		}
	},
	onShow() {
		let tokenList = utils.getStorageData("token");
		this.$store.commit('setToken',tokenList.username);
		this.userId = this.$store.state.userId;
		this.users = utils.getStorageData(this.userId+'userInfo');
		console.log(this.users);
		this.briefIntroduction = this.users.briefIntroduction;
	},
	methods: {
		clickBriefIntroduction() {
			if(this.changeComplete == 1)
			{
				this.users.briefIntroduction = this.briefIntroduction;
				uni.showLoading({
					title: '正在修改,请稍等',
					success: (res) => {
					}
				});
				const userID = this.userId;
				uni.removeStorage({
				    key: userID+'userInfo',
				    success: function (res) {
				        console.log('success');
				    }
				});
				utils.setStorageData(userID+'userInfo',this.users);
				setTimeout(() => {
						wx.hideLoading();
						uni.navigateBack({
						    delta: 1
						});
				},1000)
			}
		},
		clickBack() {
			uni.navigateBack({
			    delta: 1
			});
		}
	}
}
</script>

<style>
	.complete{
		position: absolute;
		font-size: 16px;
		right: 15px;
		top: 0;
		color: #6C6C6C;
	}
	.textarea{
		display: flex;
		margin-left: 10px;
		margin-right: 10px;
	}
		textarea{
			flex: 1;
			letter-spacing: 1px;
			font-size: 17px;
		}
</style>
